<template>
    <div class="right">
    <div class="price-wrapper">
      <span>实际支付 :</span>
      <span class="price">{{totalPrice}}</span>
    </div>
    <div style="display:inline-block"><div class="btn" @click="reset">返回</div></div>
    <div style="display: inline-block"><div class="pay-btn" @click="handlePay">确认支付</div></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { unLockTicket } from '@/api/ticket'
export default {
  name: 'TtmsPrice',

  data () {
    return {

    }
  },

  mounted () {

  },
  computed: {
    ...mapState('ticket', ['totalPrice', 'selectedSeat', 'plan'])
  },

  methods: {
    handlePay () {
      this.$bus.$emit('setOrder', true)
    },
    async reset () {
      const result = await unLockTicket(this.selectedSeat, this.plan.id)
      console.log(result)
      if (result.data === '解除锁定成功') {
        this.$store.commit('ticket/SET_SELECTED_SEAT', [])
        this.$bus.$emit('unLockeTicket', true)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.right {
    text-align: right;
}
.right .price-wrapper {
    font-size: 14px;
    color: #333;
    margin-bottom: 17px;
}
.right .price-wrapper .price {
    font-size: 36px;
    color: #f03d37;
}
.right .price-wrapper .price:before {
    content: "\FFE5";
    font-size: 24px;
}
.btn {
    display: inline-block;
    width: 190px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    color: #333;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 100px;
    margin-right: 20px;
    cursor: pointer;
}
.pay-btn {
    cursor: pointer;
    display: inline-block;
    width: 190px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    color: #fff;
    background-color: #f03d37;
    border-radius: 100px;
    -webkit-box-shadow: 0 2px 10px -2px #f03d37;
    box-shadow: 0 2px 10px -2px #f03d37;
}
</style>
